<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="./slider.css" />
    <style>
      .slider-container {
        position: relative;
        width: 375px;
        height: 250px;
        margin: 0 auto;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="my-slider" class="slider-container"></div>
  </body>
  <script src="./slider.js"></script>
  <script>
    let imgList = [
      {
        imgPath: "./imgs/1.jpg",
        jumpUrl: "#",
      },
      {
        imgPath: "./imgs/2.webp",
        jumpUrl: "#",
      },
      {
        imgPath: "./imgs/3.webp",
        jumpUrl: "#",
      },
    ];

    new Slider({
      // 轮播图容器id
      sliderId: "my-slider",
      // 轮播图列表
      imgList: imgList,
      // 是否自动播放
      autoplay: true,
      // 轮播项切换过渡动画时长
      aniTIme: 1000,
      // 自动播放切换时间间隔，单位毫秒
      intervalTime: 1000,
    }).init();
  </script>
</html>
